<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">
        <title>下载</title>
        
        <script src="https://cdn.jsdelivr.net/npm/web-streams-polyfill@3.2.1/dist/ponyfill.min.js"></script>
        <script src="https://cdn.jsdelivr.net/gh/eligrey/Blob.js/Blob.js"></script>
        <script src="https://jimmywarting.github.io/StreamSaver.js/examples/zip-stream.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/streamsaver@2.0.3/StreamSaver.min.js"></script>
    </head>
    <body>
        <script>
            /**  
             * 同步下载打包【推荐】 
             * @param zipName 压缩包文件名  
             * @param files 文件列表，格式：[{"name":"文件名", "url":"文件下载地址"},……]  
             */
            function zipFiles(zipName, files) {  
                console.log("同步下载打包开始时间：" + new Date());  
                // 创建压缩文件输出流  
                const zipFileOutputStream = streamSaver.createWriteStream(zipName);  
                // 创建下载文件流  
                const fileIterator = files.values();  
                const readableZipStream = new ZIP({  
                    async pull(ctrl) {  
                        const fileInfo = fileIterator.next();  
                        if (fileInfo.done)
                        {
                            ctrl.close();  
                        }  else  {  
                            const {name, url} = fileInfo.value;  
                            return fetch(url).then(res => {  
                                console.log(res.body);
                                ctrl.enqueue({  
                                    name,  
                                    stream: () => res.body  
                                });  
                            })  
                        }
                    }    
                });  
                if (window.WritableStream && readableZipStream.pipeTo) {  
                    // 开始下载  
                    readableZipStream  
                        .pipeTo(zipFileOutputStream)  
                        .then(() => {
                            console.log("同步下载打包结束时间：" + new Date());
                            window.location.href= "{:url('index/download1')}?id={$id}&page={$page+1}"
                });  
                }  
            }
            let files = JSON.parse('{$pic}');
            console.log(files);
            let zipName = "photo__{$id}_page_{$page}.zip";
            zipFiles(zipName, files);
        </script>
    </body>
</html>